<template>
    <div class="m-content">
        <h3>欢迎来到Kotoba47的博客</h3>
        <div class="block">
            <el-avatar :size="50" :src="user.avatar"></el-avatar>
            <div>{{ user.username }}</div>
        </div>
        <div class="maction">
            <el-link href="/blogs">主页</el-link>
            <el-divider direction="vertical"></el-divider>
            <span>
                <el-link type="success" href="/blog/add" :disabled="!hasLogin">发表文章</el-link>
            </span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="!hasLogin">
                <el-link type="primary" href="/login">登陆</el-link>
            </span>
            <span v-show="hasLogin">
                <el-link type="danger" @click="logout">退出</el-link>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    name: "Header",
    data() {
        return {
            hasLogin: false,
            user: {
                username: '请先登录',
                avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            },
            blogs: {},
            currentPage: 1,
            total: 0
        }
    },
    methods: {
        logout() {
            const _this = this
            //首先调用后端logout接口(因该接口需要认证权限,所以需要传入token)
            //其次调用$store清除用户信息及token
            this.$axios.get('/logout', {
                headers: {
                    "Authorization": localStorage.getItem("token")
                }
            }).then((res) => {
                _this.$store.commit('REMOVE_INFO')
                _this.$router.push('/login')
            });
        },
        login() { //跳转登录页面进行登录
            this.$router.push("/login")
        }
    },
    //页面创建时即会调用,进而获取用户信息
    created() {
        //如果username不为空
        if (this.$store.getters.getUser.username) {
            this.user.username = this.$store.getters.getUser.username
            this.user.avatar = this.$store.getters.getUser.avatar
            //判断是登录状态还是非登录显示 退出按钮或者登录按钮
            this.hasLogin = true
        }
    }
}
</script>
<style>
.m-content {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.maction {}
</style>